<template>
  <div>
    <Layout ref="layout" :tabs="tabs" :tabDefault.sync="tabDefault" :total="total" :listQuery="listQuery" @search="getTableData">
      <template #btn>
        <el-button type="primary" round @click="processEnrollment">办理入职</el-button>
      </template>
      <template #table="{ height }">
        <SettingTable v-loading="loading" :height="height" :list="list" :tableData="tableData">
          <template #oper="{ row }">
            <span v-if="tabDefault == 1" class="oper" @click="oper(row, 4)">信息维护</span>
            <!-- <span v-if="tabDefault == 1" class="oper" @click="oper(row, 5)">邀请补全信息</span> -->
            <span v-if="tabDefault == 1" class="oper" @click="oper(row, 1)">确认入职</span>
            <span v-if="tabDefault == 1" class="oper" @click="oper(row, 2)">放弃入职</span>
            <span v-if="tabDefault == 2" class="oper" @click="oper(row, 3)">转回待入职</span>
            <!-- <span v-if="tabDefault==2" class="oper" @click="oper(row,4)">删除</span> -->
          </template>
        </SettingTable>
      </template>
    </Layout>
    <!-- 办理入职  -->
    <el-dialog title="办理入职" :visible.sync="isDialog" width="500px" custom-class="enrollment_dialog" :close-on-click-modal="false">
      <div style="height: 600px">
        <Employee ref="Employee" @Confirm="onConfirm" />
      </div>
    </el-dialog>
    <!-- 选择入职登记表 -->
    <el-dialog title="选择要发送的入职登记表" :visible.sync="isDialog1" width="500px" custom-class="enrollment_dialog" :close-on-click-modal="false">
      <el-select v-model="registerID" placeholder="请选择" filterable style="margin: 20px 0; width: 98%">
        <el-option v-for="(item, index) in registerTable" :key="index" :value="item.key" :label="item.value"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialog1 = false">取 消</el-button>
        <el-button type="primary" @click="sendRegister">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { BLRZ } from "../config.js";
import Layout from "../../layout/index.vue";
import SettingTable from "../../layout/SettingTable.vue";
// import Employee from '../../staffManagement/editEmployee/index.vue';
export default {
  name: "induction",
  components: { Layout, SettingTable },
  data() {
    return {
      tableData: [],
      list: [],
      tabs: [
        { label: "待入职", name: "1" },
        { label: "已入职", name: "3" },
        { label: "放弃入职", name: "2" },
      ],

      tabDefault: "1",
      total: 0,
      listQuery: {
        PageSize: 50,
        PageIndex: 1,
      },

      loading: false,
      isDialog: false,
      formList: BLRZ,
      isDialog1: false,
      qrImg: "",
      registerTable: [],
      registerID: "",
      sendUserId: "",
    };
  },
  watch: {
    tabDefault: {
      handler() {
        this.tableData = [];
        this.total = 0;
        this.listQuery = { PageSize: 50, PageIndex: 1 };
      },
    },
  },
  computed: {
    minWidth() {
      return this.tabDefault == 1 ? 270 : this.tabDefault == 3 ? 0 : 90;
    },
  },
  methods: {
    sendRegister() {
      this.isDialog1 = false;
      this.$api.personChangeNew.SendWeChatGenerateUrlLink({ employeeId: this.sendUserId, registerTableId: this.registerID }).then((res) => {
        console.log(res, "res");
        if (res.data.status == 200) {
          this.$message.success("发送成功");
        } else {
          this.$message.error("发送失败");
        }
      });
    },
    getRegisterTableList() {
      this.$api.settingApi.GetSelect().then((res) => {
        this.registerTable = res.data.data;
      });
    },
    processEnrollment() {
      this.$router.push({ name: "inductionAdd" });
      // this.isDialog = true;
      // this.$nextTick(() => {
      //   this.$refs.Employee.initialize('entry');
      // });
    },
    onConfirm(type) {
      this.isDialog = false;
      if (type) {
        this.getTableData();
      }
    },
    async getTableData(e) {
      this.loading = true;
      const params = { pageIndex: this.listQuery.PageIndex, pageSize: this.listQuery.PageSize, departments: [], employeeStatus: "", nameOrJobOrPhone: "" };
      const { data } = await this.$api.optionsManage.GetEntryPage(e || params, this.tabDefault || "1");
      this.tableData = data.data.data;
      this.total = data.data.total;
      this.list = data.data.columns.sort((a, b) => a.index - b.index).map((i) => ({ prop: i.columnCode, label: i.columnname, [i.isFixed ? "fixed" : ""]: "left" }));
      this.tabDefault != 3 && this.list.push({ prop: "", label: "操作", fixed: "right", minWidth: this.minWidth });
      this.loading = false;
    },
    async oper({ Employeeid: employeeId }, command) {
      if (command == 1) {
        // 确认入职
        await this.$confirm("此操作将该员工确认入职, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" });
        this.$api.optionsManage.ConfirmEmployeeEntry({}, employeeId).then((res) => {
          console.log(res, "res");
          if (res.data.status == 200) {
            this.$message.success("入职成功");
          }
        });
      }
      if (command == 2) {
        // 放弃入职
        await this.$confirm("此操作将该员工放弃入职, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" });
        if (command == 2) {
          await this.$api.optionsManage.UnConfirmEntry({ employeeId });
        }
      }
      if (command == 3) {
        // 转回待入职
        await this.$confirm("此操作将该员工转回待入职, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" });
        if (command == 3) {
          await this.$api.optionsManage.BackAwaitEntry({ employeeId });
        }
      }
      if (command == 4) {
        //信息维护
        this.$router.push({ name: "ConfirmEntry", query: { isType: "ConfirmEntry", employeeId, randomNum: Math.floor(Math.random() * 900) + 100 } });
        return;
      }
      if (command == 5) {
        this.sendUserId = employeeId;
        //邀请补全信息
        this.isDialog1 = true;
        // const { data } = await this.$api.optionsManage.GetQRCodeUnlimited({ employeeId });
        // this.qrImg = data.data;
      }
      this.$refs.layout.onSearch();
    },
  },
  created() {
    this.getTableData();
    this.getRegisterTableList();
  },
  activated() {
    this.getTableData();
    // if (this.$route.query.isChange) {
    //   this.getTableData();
    // }
  },
};
</script>

<style lang="less">
.enrollment_dialog {
  .el-dialog__body {
    padding: 0;
    display: flex;
    justify-content: center;
  }
}
.qr-img {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
</style>
